<template>
  <div>
    <el-card shadow="hover">
      <el-container>
        <el-header height="30px">
          <div class="tital">{{nameList[num - 1]}}</div>
          <i class="el-icon-close close" @click='close'></i>
        </el-header>
        <el-main>
          <div v-if="isShow">
            <span class="dropdown-text">选择修改种类</span>
            <el-select v-model="categoryIndex" placeholder="请选择" size="mini">
              <el-option
                v-for="item in showList"
                :key="item.categoryIndex"
                :label="item.label"
                :value="item.categoryIndex">
              </el-option>
            </el-select>
          </div>
          <slot></slot>
        </el-main>
      </el-container>
    </el-card>
  </div>
</template>

<script>
export default {
  name:'StoneTemplate',
  data(){
    return{
      categoryList:[
        {
          categoryIndex:1,
          label:'种类'
        },
        {
          categoryIndex:2,
          label:'颜色'
        },
        {
          categoryIndex:3,
          label:'净度'
        },
        {
          categoryIndex:4,
          label:'切工'
        },
        {
          categoryIndex:5,
          label:'火彩'
        },
        {
          categoryIndex:6,
          label:'形状'
        },
        {
          categoryIndex:7,
          label:'质地'
        },
        {
          categoryIndex:8,
          label:'规格'
        },
        {
          categoryIndex:9,
          label:'水头'
        },
      ],
      goodsSetList:[
        {
          categoryIndex:1,
          label:'成色设置'
        },
        {
          categoryIndex:2,
          label:'属性设置'
        },
        {
          categoryIndex:3,
          label:'款式分类设置'
        },
        {
          categoryIndex:4,
          label:'商品类型设置'
        },
        {
          categoryIndex:5,
          label:'含金量设置'
        },
        {
          categoryIndex:6,
          label:'回收旧料名称设置'
        },
        {
          categoryIndex:7,
          label:'价格类型设置'
        },
        {
          categoryIndex:8,
          label:'重量单位设置'
        },
        {
          categoryIndex:9,
          label:'商品分类设置'
        },
        {
          categoryIndex:10,
          label:'商品系列设置'
        },
        {
          categoryIndex:11,
          label:'提成分类设置'
        },
        {
          categoryIndex:12,
          label:'币别设置'
        },
      ],
      nameList:['石料基础设置','商品资料基础设置','产品编码表','批发销售工费管理'],
      showList:[],
      //下拉框选择的值
      categoryIndex:1,
      isShowObj:{}, 
      //批量删除的数组
      delArray:null,
      num:null,
      isShow:null,
    }
  },
  created(){
    this.$bus.$on('stone_flag',(val) =>{
      this.num = val
      if(val == 1){
        this.showList = this.categoryList
        this.isShow = true
      }
      if(val == 2){
        this.showList = this.goodsSetList
        this.isShow = true
      }
      if(val == 3){
        this.isShow = false
      }
      if(val == 4){
        this.isShow = false
      }
    })
  },
  methods:{
    //关闭组件
    close(){
      this.$bus.$emit('close_stone_temp')
    },
  },
  watch:{
    categoryIndex(newVal){
      //绑定categoryIndex值
    this.$store.commit('setCategoryIndex',newVal)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-header{
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  .tital{
    display: inline-block;
  }
  .close{
    float: right;
    font-size: 20px;
    font-weight: 700;
  }
}
.dropdown-text{
  margin-right: 10px;
  font-size: 14px;
  font-weight: 600;
}
.el-select{
  width: 100px !important;
}
.addRow,.delRow{
  margin:15px 10px 5px;
  cursor: pointer;
}
</style>